<div class="wrapper">
  <div class="original-image">
    <div class="original-image__title">inputs</div>
    <div class="request__inputs">
      <div
        class="request__input"
        *ngFor="let input of reqstoreEntry.request.inputs | keyvalue"
      >
        <div>
          <ng-container
            *ngTemplateOutlet="isImage(input.key) ? image : plainText"
          ></ng-container>
          <ng-template #image>
            <hs-tensor-image-list
              [tensorProto]="input.value"
            ></hs-tensor-image-list>
          </ng-template>
          <ng-template #plainText>
            <div class="request__input-value" hs-expander maxHeight="170">
              <div #expand>
                {{ getValueAsText(input.value) }}
              </div>
            </div>
          </ng-template>
        </div>
      </div>
    </div>
  </div>
  <div class="probabilities">
    <ng-container *ngIf="showedExplanations$ | async as showedExplanations">
      <div class="probabilities__title">probabilities</div>
      <table class="probabilities__table">
        <tr class="probabilities__table-head-cell">
          <td class="probabilities__table-head-cell">class</td>
          <td class="probabilities__table-head-cell">value</td>
          <td></td>
        </tr>
        <tr
          class="probabilities__table-row"
          *ngFor="let item of showedExplanations"
        >
          <td
            class="probabilities__table-cell probabilities__class"
            [ngStyle]="{ color: item.color }"
          >
            {{ item.class }}
          </td>
          <td
            class="probabilities__table-cell"
            [ngStyle]="{ color: item.color }"
          >
            {{ item.probability | number: '1.5-5' }}
          </td>
          <td class="probabilities__table-cell">
            <div class="images__compare">
                <canvas
                hsPixelToCanvas
                hsScaleImage
                [pixels]="originalImage"
                [width]="imageWidth"
                [height]="imageHeight"
              ></canvas>
              <canvas
                hsPixelToCanvas
                hsScaleImage
                class="images__mask"
                [pixels]="getPixels(item.mask)"
                [width]="imageWidth"
                [height]="imageHeight"
                [ngStyle]="{'transform': 'translateX(-' + imageWidth + ')'}"
              ></canvas>
            </div>

          </td>
        </tr>
      </table>

      <button
        *ngIf="showedExplanations.length < explanations.length"
        class="probabilities__button"
        kind="stroked"
        color="primary"
        hs-button
        (click)="showMore()"
      >
        SHOW 5 MORE
      </button>
    </ng-container>
  </div>
</div>
<div class="footer">
  <button hs-button (click)="onClose()">close</button>
</div>
